<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="/reader/static/favicon.ico" type="image/x-icon">
    <title>Words</title>
    <style>
        @font-face {
            font-family: Segoe Print;
            src: url("/reader/static/segoe_print.ttf");
        }
        @font-face {
            font-family: Lucida Sans;
            src: url("/reader/static/LucidaSans.otf");
        }
        body {
            font-family: 'Segoe Print', '等线', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            background-color: whitesmoke;
        }

        .container {
            margin: auto;
            display: flex;
            flex-direction: row;
            padding: 0px 10px 0px 10px;
            width: fit-content;
	    flex-wrap: wrap;
        }

        .card {
   	    margin: 5px;	
            box-shadow: gray 1px 2px 8px;
            width: fit-content;
            padding: 10px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            overflow-wrap: normal;
            color: whitesmoke;
        }

        .card .word {
            font-size: 32px;
            font-weight: bold;
        }

        .card .phonetic {
            font-family: 'Lucida Sans', 'Segoe UI', '等线', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 26px;
            font-style: italic;
            margin-left: 5px;
        }

        .card .translation {
            font-family: 'Lucida HandWriting', 'Segoe UI', '等线', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
        }

        .card .exchange {
            max-width: 500px;
        }
        .card .exchange span{
            margin-right: 15px;
        }
    </style>
    <script src="/reader/static/jquery-3.4.1.min.js"></script>
    <script src="/reader/static/common.js"></script>
    <script>
        // 创建一个 div class="card" 并将内容设置为 data
        function generateCard(data) {
            let createDiv = () => { return document.createElement("div"); };
            let createSpan = () => { return document.createElement("span"); };
            // word phonetic
            let tmpDiv = createDiv();
            let wordSpan = createSpan();
            wordSpan.innerText = data["word"];
            wordSpan.className = "word";
            // phonetic
            let phoneticSpan = createSpan();
            phoneticSpan.className = "phonetic";
            if (data["phonetic"].length > 0)
                phoneticSpan.innerText = "[" + data["phonetic"] + "]";
            tmpDiv.appendChild(wordSpan);
            tmpDiv.appendChild(phoneticSpan);
            // translation
            let transDiv = createDiv();
            transDiv.className = "translation";
            let transList = data["translation"].split('\n');
            transList.forEach(tran => {
                let tmpSpan = createSpan();
                tmpSpan.innerText = tran;
                transDiv.appendChild(tmpSpan);
            });
            // exchange
            let exDiv = createDiv();
            exDiv.className = "exchange";
            let exchangeList = data["exchange"].split('/');
            let typeMeaning = {
                "p": "过去式",
                "d": "过去分词",
                "i": "现在进行时",
                "3": "第三人称单数",
                "r": "比较级",
                "t": "最高级",
                "s": "复数",
            };
            exchangeList.forEach(exchange => {
                let colonPos = exchange.indexOf(':');
                let type = typeMeaning[exchange.substring(0, colonPos)];
                if (type != undefined) {
                    let tmpSpan = createSpan();
                    tmpSpan.innerHTML = type + ":" + exchange.substring(colonPos + 1) + ";";
                    exDiv.appendChild(tmpSpan);
                }
            });
            // add to cardDIv
            let cardDiv = createDiv();
            cardDiv.className = "card";
            let tmpColor = randomColor();
            cardDiv.style.backgroundColor = tmpColor.color;
            cardDiv.setAttribute("color_name", tmpColor.name);
            cardDiv.appendChild(tmpDiv);
            cardDiv.appendChild(transDiv);
            cardDiv.appendChild(exDiv);
            return cardDiv;
        }
        // 创建所有卡片，data 为 json数组
        function createAllCard(data) {
            data = shuffle(data["data"]);
            let container = document.getElementById("container");
            for (let i = data.length - 1; i >= 0; i--) { container.appendChild(generateCard(data[i])); }
        }
        // 获取数据
        function getAllWord(onSuccess, onFail) {
            $.get("/reader/cgi/allwords", (data, status, xhr) => {
                if (status == "success") onSuccess(data);
                else onFail();
            }).fail(() => { alert("网络错误"); });
        }

        window.onload = function () {
            getAllWord(
                (data) => {
                    if (typeof (data) == "string") data = JSON.parse(data);
                    createAllCard(data);
                },
                () => { alert("获取信息失败"); }
            )
        };
    </script>
</head>

<body>
    <div id="container" class="container">
        <!-- <div class="card">
            <div>
                <span class="word">about</span>
                <span class="phonetic">[ә'baut]</span>
            </div>
            <div class="translation">
                <span>prep. 在...周围，大约 有关 关于</span>
                <span>adv. 大约, 四处, 在附近, 周围</span>
            </div>
            <div class="exchange">
                <span>s.</span>
            </div>
        </div> -->
    </div>
    </div>
</body>

</html>
